<template>
  <div class="report-page">
    <!-- 顶部导航 -->
    <div class="nav-header">
      <div class="nav-tabs">
        <span class="nav-item active">检查报告</span>
        <span class="nav-item">检验报告</span>
      </div>
      <el-button class="logout-btn" @click="handleLogout">
        <el-icon><SwitchButton /></el-icon>
        退出
      </el-button>
    </div>

    <!-- 报告列表 -->
    <div class="report-grid">
      <!-- 头部X线报告 -->
      <div class="report-card">
        <h3>头部X线报告</h3>
        <p class="update-time">更新于：{{ formatDate() }}</p>
        <el-button class="view-btn" @click="handleView('xray')">
          查看
          <el-icon class="el-icon--right"><ArrowRight /></el-icon>
        </el-button>
      </div>

      <!-- 心电图 -->
      <div class="report-card">
        <h3>心电图</h3>
        <p class="update-time">更新于：{{ formatDate() }}</p>
        <el-button class="view-btn" @click="handleView('ecg')">
          查看
          <el-icon class="el-icon--right"><ArrowRight /></el-icon>
        </el-button>
      </div>

      <!-- CT脑部 -->
      <div class="report-card">
        <h3>CT脑部</h3>
        <p class="update-time">更新于：{{ formatDate() }}</p>
        <el-button class="view-btn" @click="handleView('ct')">
          查看
          <el-icon class="el-icon--right"><ArrowRight /></el-icon>
        </el-button>
      </div>

      <!-- 超声报告 -->
      <div class="report-card">
        <h3>超声报告</h3>
        <p class="update-time">更新于：{{ formatDate() }}</p>
        <el-button class="view-btn" @click="handleView('ultrasound')">
          查看
          <el-icon class="el-icon--right"><ArrowRight /></el-icon>
        </el-button>
      </div>
    </div>

    <!-- 图片预览对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="currentReport?.title"
      width="50%"
      :before-close="handleClose"
    >
      <div class="report-detail">
        <el-image 
          :src="currentReport?.image" 
          fit="contain"
          style="width: 100%; height: 400px;"
          @error="handleImageError"
        >
          <template #error>
            <div class="image-error">
              <el-icon><Picture /></el-icon>
              <span>图片加载失败</span>
            </div>
          </template>
        </el-image>
        <div class="report-info">
          <h4>报告详情</h4>
          <p>{{ currentReport?.description }}</p>
          <p class="report-date">检查日期：{{ currentReport?.date }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ArrowRight, SwitchButton, Picture } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'

interface Report {
  title: string
  image: string
  description: string
  date: string
}

interface Reports {
  [key: string]: Report
}

const router = useRouter()
const dialogVisible = ref(false)
const currentReport = ref<Report | null>(null)

// 示例报告数据
const reports: Reports = reactive({
  xray: {
    title: '头部X线报告',
    image: 'src/assets/imgs/头部.jpg',
    description: '头部X线检查结果正常，未见异常。',
    date: '2023-12-29'
  },
  ecg: {
    title: '心电图检查报告',
    image: '/src/assets/imgs/心电图.jpg',
    description: '心电图检查显示窦性心律，心率75次/分。',
    date: '2023-12-29'
  },
  ct: {
    title: 'CT脑部检查报告',
    image: '/src/assets/imgs/Ct.jpg',
    description: 'CT扫描未见明显异常。',
    date: '2023-12-29'
  },
  ultrasound: {
    title: '超声检查报告',
    image: '/src/assets/imgs/超声脑部.jpg',
    description: '超声检查显示各项指标在正常范围内。',
    date: '2023-12-29'
  }
})

// 格式化日期
const formatDate = () => {
  return '2023-12-29 12:00:01'
}

// 图片加载错误处理
const handleImageError = (e: Event) => {
  const imgElement = e.target as HTMLImageElement
  imgElement.src = '/src/assets/images/error-placeholder.png'
}

// 处理预览
const handlePreview = (type: string) => {
  currentReport.value = reports[type]
  dialogVisible.value = true
}

// 处理查看
const handleView = (type: string) => {
  currentReport.value = reports[type]
  dialogVisible.value = true
}

// 处理关闭
const handleClose = () => {
  dialogVisible.value = false
}

// 处理退出
const handleLogout = () => {
  ElMessageBox.confirm(
    '确定要退出吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    router.push('/Illness')
  })
}
</script>

<style scoped>
.report-page {
  min-height: 100vh;
  background-color: #f0f9f9;
}

.nav-header {
  background-color: #fbe5e5;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.nav-tabs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
}

.nav-item {
  font-size: 16px;
  color: #333;
  cursor: pointer;
  padding: 4px 0;
}

.nav-item.active {
  font-weight: bold;
  position: relative;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
}

.logout-btn {
  color: #606266;
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  gap: 20px;
  padding: 20px;
  justify-content: center;
  margin: 0 auto;
  max-width: 1200px;
}

.report-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  height: 140px; /* 固定卡片高度 */
}

.report-card h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.update-time {
  margin: 0;
  font-size: 14px;
  color: #999;
}

.view-btn {
  margin-top: auto;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100px;
}

.view-btn:hover {
  background-color: #66b1ff;
}

.view-btn .el-icon {
  margin-left: 4px;
}

:deep(.el-dialog) {
  border-radius: 8px;
  min-width: 600px;
}

:deep(.el-dialog__body) {
  padding: 0;
}

.report-detail {
  padding: 20px;
  max-height: 600px;
  overflow-y: auto;
}

.report-info {
  margin-top: 20px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
}

.report-info h4 {
  margin: 0 0 12px 0;
  color: #333;
}

.report-date {
  margin-top: 12px;
  color: #909399;
}

.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  background-color: #f5f7fa;
  color: #909399;
}

.image-error .el-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
</style>
